<!DOCTYPE html>
<html lang=zh>
<head>
  <meta charset="utf-8">
  
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
  <meta name="renderer" content="webkit">
  <meta http-equiv="Cache-Control" content="no-transform" />
  <meta http-equiv="Cache-Control" content="no-siteapp" />
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="format-detection" content="telephone=no,email=no,adress=no">
  <!-- Color theme for statusbar -->
  <meta name="theme-color" content="#000000" />
  <!-- 强制页面在当前窗口以独立页面显示,防止别人在框架里调用页面 -->
  <meta http-equiv="window-target" content="_top" />
  
  
  <title>Vue3.2+Viet+Element-Plus | 大树先生博客</title>
  <meta name="description" content="Vue3.2+Viet+Element-Plus 介绍一个简单的基于Vue的CRUD（增删改查）。  软件架构Vue3.2+Vite+Element-Plus  仓库地址Gitee：https:&#x2F;&#x2F;gitee.com&#x2F;Frst903&#x2F;vue32--viet--element-plus  安装教程 通过 Git 克隆仓库源代码 1git clone https:&#x2F;&#x2F;gitee.com&#x2F;Frst903">
<meta property="og:type" content="article">
<meta property="og:title" content="Vue3.2+Viet+Element-Plus">
<meta property="og:url" content="https://gitee.com/Frst903/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/index.html">
<meta property="og:site_name" content="大树先生博客">
<meta property="og:description" content="Vue3.2+Viet+Element-Plus 介绍一个简单的基于Vue的CRUD（增删改查）。  软件架构Vue3.2+Vite+Element-Plus  仓库地址Gitee：https:&#x2F;&#x2F;gitee.com&#x2F;Frst903&#x2F;vue32--viet--element-plus  安装教程 通过 Git 克隆仓库源代码 1git clone https:&#x2F;&#x2F;gitee.com&#x2F;Frst903">
<meta property="og:locale" content="zh_CN">
<meta property="article:published_time" content="2022-12-11T14:40:41.104Z">
<meta property="article:modified_time" content="2023-01-21T15:28:48.727Z">
<meta property="article:author" content="Frst903">
<meta property="article:tag" content="Vue">
<meta name="twitter:card" content="summary">
  <!-- Canonical links -->
  <link rel="canonical" href="https://gitee.com/Frst903/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/index.html">
  
  
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
  
  
<link rel="stylesheet" href="/blogs/css/style.css">

  
  
  
    <link href="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.3.5/dist/jquery.fancybox.min.css" rel="stylesheet">
  
  
<meta name="generator" content="Hexo 6.3.0"></head>


<body class="main-center theme-black" itemscope itemtype="http://schema.org/WebPage">
  <header class="header" itemscope itemtype="http://schema.org/WPHeader">
  <div class="slimContent">
    <div class="navbar-header">
      
      
      <div class="profile-block text-center">
        <a id="avatar" href="https://gitee.com/Frst903" target="_blank">
          <img class="img-circle img-rotate" src="/blogs/images/avatar.jpg" width="200" height="200">
        </a>
        <h2 id="name" class="hidden-xs hidden-sm">大树先生</h2>
        <h3 id="title" class="hidden-xs hidden-sm hidden-md">前端开发、UI设计攻城狮</h3>
        <small id="location" class="text-muted hidden-xs hidden-sm"><i class="icon icon-map-marker"></i> 中国</small>
      </div>
      
      <div class="search" id="search-form-wrap">

    <form class="search-form sidebar-form">
        <div class="input-group">
            <input type="text" class="search-form-input form-control" placeholder="搜索" />
            <span class="input-group-btn">
                <button type="submit" class="search-form-submit btn btn-flat" onclick="return false;"><i class="icon icon-search"></i></button>
            </span>
        </div>
    </form>
    <div class="ins-search">
  <div class="ins-search-mask"></div>
  <div class="ins-search-container">
    <div class="ins-input-wrapper">
      <input type="text" class="ins-search-input" placeholder="想要查找什么..." x-webkit-speech />
      <button type="button" class="close ins-close ins-selectable" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
    </div>
    <div class="ins-section-wrapper">
      <div class="ins-section-container"></div>
    </div>
  </div>
</div>


</div>
      <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#main-navbar" aria-controls="main-navbar" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
    </div>
    <nav id="main-navbar" class="collapse navbar-collapse" itemscope itemtype="http://schema.org/SiteNavigationElement" role="navigation">
      <ul class="nav navbar-nav main-nav menu-highlight">
        
        
        <li class="menu-item menu-item-home">
          <a href="/blogs/.">
            
            <i class="icon icon-home-fill"></i>
            
            <span class="menu-title">首页</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-archives">
          <a href="/blogs/archives">
            
            <i class="icon icon-archives-fill"></i>
            
            <span class="menu-title">归档</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-categories">
          <a href="/blogs/categories">
            
            <i class="icon icon-folder"></i>
            
            <span class="menu-title">分类</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-tags">
          <a href="/blogs/tags">
            
            <i class="icon icon-tags"></i>
            
            <span class="menu-title">标签</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-repository">
          <a href="/blogs/repository">
            
            <i class="icon icon-project"></i>
            
            <span class="menu-title">项目</span>
          </a>
        </li>
        
        
        <li class="menu-item menu-item-links">
          <a href="/blogs/links">
            
            <i class="icon icon-friendship"></i>
            
            <span class="menu-title">友链</span>
          </a>
        </li>
        
      </ul>
      
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/Frst903" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://github.com/Frst903" target="_blank" title="Gitee" ><i class="icon icon-gitee"></i></a></li>
        
    </ul>

    </nav>
  </div>
</header>

  
    <aside class="sidebar" itemscope itemtype="http://schema.org/WPSideBar">
  <div class="slimContent">
    
      <div class="widget">
    <h3 class="widget-title">公告</h3>
    <div class="widget-body">
        <div id="board">
            <div class="content">
                <p>2022年12月11日正式启用！</p>
            </div>
        </div>
    </div>
</div>

    
      
  <div class="widget">
    <h3 class="widget-title">分类</h3>
    <div class="widget-body">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/blogs/categories/%E5%89%8D%E7%AB%AF/">前端</a><span class="category-list-count">2</span></li><li class="category-list-item"><a class="category-list-link" href="/blogs/categories/%E5%90%8E%E7%AB%AF/">后端</a><span class="category-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签</h3>
    <div class="widget-body">
      <ul class="tag-list" itemprop="keywords"><li class="tag-list-item"><a class="tag-list-link" href="/blogs/tags/Java/" rel="tag">Java</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blogs/tags/Vue/" rel="tag">Vue</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/blogs/tags/%E4%B8%89%E4%BB%B6%E5%A5%97/" rel="tag">三件套</a><span class="tag-list-count">1</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">标签云</h3>
    <div class="widget-body tagcloud">
      <a href="/blogs/tags/Java/" style="font-size: 13px;">Java</a> <a href="/blogs/tags/Vue/" style="font-size: 13px;">Vue</a> <a href="/blogs/tags/%E4%B8%89%E4%BB%B6%E5%A5%97/" style="font-size: 13px;">三件套</a>
    </div>
  </div>

    
      
  <div class="widget">
    <h3 class="widget-title">归档</h3>
    <div class="widget-body">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/blogs/archives/2022/12/">十二月 2022</a><span class="archive-list-count">4</span></li></ul>
    </div>
  </div>


    
      
  <div class="widget">
    <h3 class="widget-title">最新文章</h3>
    <div class="widget-body">
      <ul class="recent-post-list list-unstyled ">
        
          <li>
            
            <div class="item-thumb">
              <a href="/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/" class="thumb">
    
    
        <span class="thumb-image thumb-none"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blogs/categories/%E5%89%8D%E7%AB%AF/">前端</a>
              </p>
              <p class="item-title">
                <a href="/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/" class="title">Vue3.2+Viet+Element-Plus</a>
              </p>
              <p class="item-date">
                <time datetime="2022-12-11T14:40:41.104Z" itemprop="datePublished">2022-12-11</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/blogs/2022/12/11/SuperMarket-Checkout-system/" class="thumb">
    
    
        <span class="thumb-image thumb-none"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blogs/categories/%E5%90%8E%E7%AB%AF/">后端</a>
              </p>
              <p class="item-title">
                <a href="/blogs/2022/12/11/SuperMarket-Checkout-system/" class="title">SuperMarket_Checkout_system</a>
              </p>
              <p class="item-date">
                <time datetime="2022-12-11T14:40:41.100Z" itemprop="datePublished">2022-12-11</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/blogs/2022/12/11/Snowflake-Travel-Agency/" class="thumb">
    
    
        <span class="thumb-image thumb-none"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                <a class="category-link" href="/blogs/categories/%E5%89%8D%E7%AB%AF/">前端</a>
              </p>
              <p class="item-title">
                <a href="/blogs/2022/12/11/Snowflake-Travel-Agency/" class="title">Snowflake Travel Agency</a>
              </p>
              <p class="item-date">
                <time datetime="2022-12-11T14:40:41.095Z" itemprop="datePublished">2022-12-11</time>
              </p>
            </div>
          </li>
          
          <li>
            
            <div class="item-thumb">
              <a href="/blogs/2022/12/11/hello-world/" class="thumb">
    
    
        <span class="thumb-image thumb-none"></span>
    
</a>

            </div>
            
            <div class="item-inner">
              <p class="item-category">
                
              </p>
              <p class="item-title">
                <a href="/blogs/2022/12/11/hello-world/" class="title">Hello World</a>
              </p>
              <p class="item-date">
                <time datetime="2022-12-11T13:23:34.730Z" itemprop="datePublished">2022-12-11</time>
              </p>
            </div>
          </li>
          
      </ul>
    </div>
  </div>
  

    
  </div>
</aside>

  
  
<main class="main" role="main">
  <div class="content">
  <article id="post-Vue3.2+Viet+Element-Plus" class="article article-type-post" itemscope itemtype="http://schema.org/BlogPosting">
    
    <div class="article-header">
      
        
  
    <h1 class="article-title" itemprop="name">
      Vue3.2+Viet+Element-Plus
    </h1>
  

      
      <div class="article-meta">
        <span class="article-date">
    <i class="icon icon-calendar-check"></i>
	<a href="/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/" class="article-date">
	  <time datetime="2022-12-11T14:40:41.104Z" itemprop="datePublished">2022-12-11</time>
	</a>
</span>
        
  <span class="article-category">
    <i class="icon icon-folder"></i>
    <a class="article-category-link" href="/blogs/categories/%E5%89%8D%E7%AB%AF/">前端</a>
  </span>

        
  <span class="article-tag">
    <i class="icon icon-tags"></i>
	<a class="article-tag-link-link" href="/blogs/tags/Vue/" rel="tag">Vue</a>
  </span>


        
	<span class="article-read hidden-xs">
	    <i class="icon icon-eye-fill" aria-hidden="true"></i>
	    <span id="busuanzi_container_page_pv">
			<span id="busuanzi_value_page_pv">0</span>
		</span>
	</span>


        <span class="post-comment"><i class="icon icon-comment"></i> <a href="/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/#comments" class="article-comment-link">评论</a></span>
        
	
		<span class="post-wordcount hidden-xs" itemprop="wordCount">字数统计: 479(字)</span>
	
	
		<span class="post-readcount hidden-xs" itemprop="timeRequired">阅读时长: 1(分)</span>
	

      </div>
    </div>
    <div class="article-entry marked-body" itemprop="articleBody">
      
        <h1 id="Vue3-2-Viet-Element-Plus"><a href="#Vue3-2-Viet-Element-Plus" class="headerlink" title="Vue3.2+Viet+Element-Plus"></a>Vue3.2+Viet+Element-Plus</h1><hr>
<h4 id="介绍"><a href="#介绍" class="headerlink" title="介绍"></a>介绍</h4><p>一个简单的基于Vue的CRUD（增删改查）。</p>
<hr>
<h4 id="软件架构"><a href="#软件架构" class="headerlink" title="软件架构"></a>软件架构</h4><p>Vue3.2+Vite+Element-Plus</p>
<hr>
<h4 id="仓库地址"><a href="#仓库地址" class="headerlink" title="仓库地址"></a>仓库地址</h4><p>Gitee：<a href="https://gitee.com/Frst903/vue32--viet--element-plus">https://gitee.com/Frst903/vue32--viet--element-plus</a></p>
<hr>
<h4 id="安装教程"><a href="#安装教程" class="headerlink" title="安装教程"></a>安装教程</h4><ol>
<li><p>通过 Git 克隆仓库源代码</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone https://gitee.com/Frst903/vue32--viet--element-plus.git</span><br></pre></td></tr></table></figure>


</li>
<li><p>在项目的根目录使用编译器打开本项目</p>
</li>
<li><p>在终端安装依赖</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">npm install</span><br><span class="line"></span><br><span class="line">// 如若安装依赖过程报错，执行以下操作清除缓存：</span><br><span class="line">npm cache clean --force</span><br><span class="line"></span><br><span class="line">// 清除缓存后重新执行上述第一行指令安装依赖</span><br></pre></td></tr></table></figure>


</li>
<li><p>在终端运行项目</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run dev</span><br></pre></td></tr></table></figure>


</li>
<li><p>在终端打包项目</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm run build</span><br></pre></td></tr></table></figure>


</li>
<li><p>打包好的项目在浏览器进行测试，观看样式是否支持显示</p>
</li>
</ol>
<hr>
<h4 id="特别声明："><a href="#特别声明：" class="headerlink" title="特别声明："></a>特别声明：</h4><ul>
<li><p>&#x3D;&#x3D;<strong>版权声明：</strong> 本博客所有文章除特别声明外，均采用&#x3D;&#x3D; <a target="_blank" rel="noopener" href="http://creativecommons.org/licenses/by/4.0/deed.zh">CC BY 4.0 CN协议</a> &#x3D;&#x3D;许可协议。转载请注明出处！&#x3D;&#x3D;</p>
</li>
<li><h4 id="x3D-x3D-特别声明：本项目只提供于学习使用，未经授权禁止用于商业用途，对于违规使用带来的一切后果、责任由使用者自行承担与本博主无关！！！-x3D-x3D"><a href="#x3D-x3D-特别声明：本项目只提供于学习使用，未经授权禁止用于商业用途，对于违规使用带来的一切后果、责任由使用者自行承担与本博主无关！！！-x3D-x3D" class="headerlink" title="&#x3D;&#x3D;特别声明：本项目只提供于学习使用，未经授权禁止用于商业用途，对于违规使用带来的一切后果、责任由使用者自行承担与本博主无关！！！&#x3D;&#x3D;"></a>&#x3D;&#x3D;<strong>特别声明：本项目只提供于学习使用，未经授权禁止用于商业用途，对于违规使用带来的一切后果、责任由使用者自行承担与本博主无关！！！</strong>&#x3D;&#x3D;</h4></li>
</ul>
<hr>
<h4 id="关于本项目："><a href="#关于本项目：" class="headerlink" title="关于本项目："></a>关于本项目：</h4><ul>
<li><h4 id="x3D-x3D-如发现本项目有任何的问题都可以通过下方的联系方式联系我或者在项目里面向我提交-Issue，谢谢！！！-x3D-x3D"><a href="#x3D-x3D-如发现本项目有任何的问题都可以通过下方的联系方式联系我或者在项目里面向我提交-Issue，谢谢！！！-x3D-x3D" class="headerlink" title="&#x3D;&#x3D;如发现本项目有任何的问题都可以通过下方的联系方式联系我或者在项目里面向我提交 Issue，谢谢！！！&#x3D;&#x3D;"></a><strong>&#x3D;&#x3D;如发现本项目有任何的问题都可以通过下方的联系方式联系我或者在项目里面向我提交 Issue，谢谢！！！&#x3D;&#x3D;</strong></h4></li>
</ul>
<h4 id="联系方式："><a href="#联系方式：" class="headerlink" title="联系方式："></a>联系方式：</h4><ul>
<li><p>QQ：366392249（ QQ昵称：梁某与bug ）</p>
</li>
<li><p>QQ邮箱：<a href="mailto:&#x33;&#x36;&#x36;&#x33;&#x39;&#x32;&#x32;&#52;&#x39;&#64;&#x71;&#x71;&#x2e;&#x63;&#111;&#x6d;">&#x33;&#x36;&#x36;&#x33;&#x39;&#x32;&#x32;&#52;&#x39;&#64;&#x71;&#x71;&#x2e;&#x63;&#111;&#x6d;</a></p>
</li>
<li><p>微信：Frst_08_04（ 微信昵称：梁某与bug ）</p>
</li>
<li><p>哔哩哔哩：<a target="_blank" rel="noopener" href="https://space.bilibili.com/485070090/%EF%BC%88">https://space.bilibili.com/485070090/（</a> 哔哩哔哩昵称：梁某与bug ）</p>
</li>
<li><p>Gitee：<a href="https://gitee.com/Frst903">https://gitee.com/Frst903</a></p>
</li>
<li><p>Github：<a target="_blank" rel="noopener" href="https://github.com/Frst903">https://github.com/Frst903</a></p>
</li>
</ul>
<hr>
<h4 id="参与贡献"><a href="#参与贡献" class="headerlink" title="参与贡献"></a>参与贡献</h4><ul>
<li>如果你觉得该项目帮助到了您，您可以考虑一下执行以下操作：</li>
</ul>
<ol>
<li>Fork 本仓库</li>
<li>新建 Feat_xxx 分支</li>
<li>提交代码</li>
<li>新建 Pull Request</li>
<li>或者为本项目仓库点一个 Star</li>
</ol>
<p>谢谢！</p>
<p>​																																																																<strong>Frst_08_04</strong></p>
<p>​																																																															<strong>2023年1月21日</strong></p>

      
    </div>
    <div class="article-footer">
      <blockquote class="mt-2x">
  <ul class="post-copyright list-unstyled">
    
    <li class="post-copyright-link hidden-xs">
      <strong>本文链接：</strong>
      <a href="https://gitee.com/Frst903/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/" title="Vue3.2+Viet+Element-Plus" target="_blank" rel="external">https://gitee.com/Frst903/blogs/2022/12/11/Vue3.2+Viet+Element-Plus/</a>
    </li>
    
    <li class="post-copyright-license">
      <strong>版权声明： </strong> 本博客所有文章除特别声明外，均采用 <a href="http://creativecommons.org/licenses/by/4.0/deed.zh" target="_blank" rel="external">CC BY 4.0 CN协议</a> 许可协议。转载请注明出处！
    </li>
  </ul>
</blockquote>


<div class="panel panel-default panel-badger">
  <div class="panel-body">
    <figure class="media">
      <div class="media-left">
        <a href="https://gitee.com/Frst903" target="_blank" class="img-burn thumb-sm visible-lg">
          <img src="/blogs/images/avatar.jpg" class="img-rounded w-full" alt="">
        </a>
      </div>
      <div class="media-body">
        <h3 class="media-heading"><a href="https://gitee.com/Frst903" target="_blank"><span class="text-dark">大树先生</span><small class="ml-1x">前端开发、UI设计攻城狮</small></a></h3>
        <div>下定决心，不怕牺牲，排除万难，去争取胜利！</div>
      </div>
    </figure>
  </div>
</div>


    </div>
  </article>
  
    
  <section id="comments">
  	
  </section>


  
</div>

  <nav class="bar bar-footer clearfix" data-stick-bottom>
  <div class="bar-inner">
  
  <ul class="pager pull-left">
    
    
    <li class="next">
      <a href="/blogs/2022/12/11/SuperMarket-Checkout-system/" title="SuperMarket_Checkout_system"><span>下一篇&nbsp;&nbsp;</span><i class="icon icon-angle-right" aria-hidden="true"></i></a>
    </li>
    
    
  </ul>
  
  
  
  <div class="bar-right">
    
    <div class="share-component" data-sites="qq,wechat" data-mobile-sites="qq,wechat"></div>
    
  </div>
  </div>
</nav>
  


</main>

  <footer class="footer" itemscope itemtype="http://schema.org/WPFooter">
	
	
    <ul class="social-links">
    	
        <li><a href="https://github.com/Frst903" target="_blank" title="Github" ><i class="icon icon-github"></i></a></li>
        
        <li><a href="https://github.com/Frst903" target="_blank" title="Gitee" ><i class="icon icon-gitee"></i></a></li>
        
    </ul>

    <div class="copyright">
    	
        &copy; 2023 Frst903
        
        <div class="publishby">
        	Theme by <a href="https://github.com/cofess" target="_blank"> cofess </a>base on <a href="https://github.com/cofess/hexo-theme-pure" target="_blank">pure</a>.
        </div>
    </div>
</footer>
  <script src="//cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script>
window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
</script>

<script src="/blogs/js/plugin.min.js"></script>


<script src="/blogs/js/application.js"></script>


    <script>
(function (window) {
    var INSIGHT_CONFIG = {
        TRANSLATION: {
            POSTS: '文章',
            PAGES: '页面',
            CATEGORIES: '分类',
            TAGS: '标签',
            UNTITLED: '(未命名)',
        },
        ROOT_URL: '/blogs/',
        CONTENT_URL: '/blogs/content.json',
    };
    window.INSIGHT_CONFIG = INSIGHT_CONFIG;
})(window);
</script>

<script src="/blogs/js/insight.js"></script>






   
<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>





   


  <script src="//cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.3.5/dist/jquery.fancybox.min.js"></script>
  <script>
  //利用 FancyBox 实现点击图片放大
  $(document).ready(function() {
    $('article img').not('[hidden]').not('.panel-body img').each(function() {
      var $image = $(this);
      var imageCaption = $image.attr('alt');
      var $imageWrapLink = $image.parent('a');
      if ($imageWrapLink.length < 1) {
        var src = this.getAttribute('src');
        var idx = src.lastIndexOf('?');
        if (idx != -1) {
          src = src.substring(0, idx);
        }
        $imageWrapLink = $image.wrap('<a href="' + src + '"></a>').parent('a');
      }
      $imageWrapLink.attr('data-fancybox', 'images');
      if (imageCaption) {
        $imageWrapLink.attr('data-caption', imageCaption);
      }
    });
    $().fancybox({
      selector: '[data-fancybox="images"]',
      hash: false,
      loop: false,
    });
  });
  </script>





</body>
</html>